<!-- 编号设置类型组件 -->

<!-- 编号设置组件 -->
<template>
  <div>
    <pageHeader :title="title" :bread-crumb="breadCrumb" :show-back="true">
      <template #buts>
        <a-button type="primary" @click="save">保存</a-button>
        <a-button @click="cancel">取消</a-button>
      </template>
    </pageHeader>
    <div class="client-code-setting">
      <a-space>
        <a-dropdown @select="handleSelect">
          <a-button
            type="outline"
            :style="{
              width: '90px',
              height: '40px',
            }"
            >添加字段</a-button
          >
          <template #content>
            <a-dsubmenu value="1">
              <template #default>智能填充</template>
              <template #content>
                <a-doption value="1-1">签订次数</a-doption>
                <a-doption value="1-2">年份</a-doption>
                <a-doption value="1-3">年月日</a-doption>
              </template>
            </a-dsubmenu>
            <a-doption value="2">自定义字段</a-doption>
          </template>
        </a-dropdown>
      </a-space>
      <a-scrollbar style="height: auto; overflow: auto">
        <draggable
          class="item"
          :list="list"
          ghost-class="ghost"
          handle=".move"
          filter=".forbid"
          :force-fallback="true"
          chosen-class="chosenClass"
          animation="300"
          :fallback-class="true"
          :fallback-on-body="true"
          :touch-start-threshold="10"
          :fallback-tolerance="10"
          :sort="true"
        >
          <template #item="{ element, index }">
            <div class="item-box">
              <div class="item-box-headerBox">
                <div class="item-box-header">
                  <icon-menu class="icon move" :rotate="90" />
                  <a-input-search
                    v-model="element.name"
                    :disabled="element.state === 2 ? true : false"
                    :style="{ width: '200px' }"
                    search-button
                    allow-clear
                    show-word-limit
                    :max-length="50"
                  >
                    <template #button-icon>
                      <icon-delete @click="deleteItem(index)" />
                    </template>
                  </a-input-search>
                </div>
              </div>

              <div class="item-container">
                <a-input
                  :key="element.id"
                  v-model="element.value"
                  :style="{
                    width: '224px',
                    marginTop: '30px',
                    marginLeft: '30px',
                  }"
                  :max-length="50"
                  placeholder="请输入"
                  allow-clear
                  show-word-limit
                  :disabled="element.state === 2 ? true : false"
                >
                </a-input>
                <div class="line" v-if="index === 0"> - </div>
              </div>
            </div>
          </template>
        </draggable>
      </a-scrollbar>
      <div class="client-read">
        <h2> {{ codeTitle }}预览</h2>
        <a-input v-model="currCode" class="code-read" disabled></a-input>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, watchEffect, computed } from 'vue';
  import { useRouter } from 'vue-router';
  import Draggable from 'vuedraggable';
  import pageHeader from '@/components/page-header/index.vue';
  import { ClientCodeSettingInfo } from '@/types/order';
  import { Message } from '@arco-design/web-vue';
  import { getNowDate } from '@/utils/utils';
  import { cloneDeep } from 'lodash';

  const props = withDefaults(
    // 参数说明
    defineProps<{
      title: string; // pageHeader的标题
      breadCrumb: any[]; // 面包屑名称
      list: any[]; // 编号列表
      codeTitle: string; // 编号标题
    }>(),
    {}
  );

  const emit = defineEmits(['codeSettingSave']);

  const router = useRouter();

  // const list = reactive<Array<ClientCodeSettingInfo>>([]); // 储存获取回来的数据
  let currCode = ref<string>(''); // 储存当前的合同编号
  type ReturnItem = ClientCodeSettingInfo | (() => ClientCodeSettingInfo);

  const Currlist = computed(() => props.list);

  watchEffect(() => {
    currCode.value = '';
    Currlist.value.forEach((item: any, index) => {
      if (index === 0) currCode.value += `${item.value}-`;
      else currCode.value += item.value;
    });
  });

  // 增加字段按钮
  // const handleSelect = (val: string) => {
  //   switch (val) {
  //     case '1-1':
  //       list.push({
  //         name: '签订次数',
  //         value: '1',
  //         type: 0,
  //       });
  //       break;
  //     case '1-2':
  //       list.push({
  //         name: '年份',
  //         value: `${new Date().getFullYear()}`,
  //         type: 0,
  //       });
  //       break;
  //     case '1-3':
  //       list.push({
  //         name: '年月日',
  //         value: `${getNowDate()}`,
  //         type: 0,
  //       });
  //       break;
  //     case '2':
  //       list.push({
  //         name: '',
  //         value: '',
  //         type: 1,
  //       });
  //       break;
  //     default:
  //       break;
  //   }
  // };

  const itemMapping: any = {
    '1-1': {
      name: '签订次数',
      value: '1',
      state: 2,
    },
    '1-2': () => ({
      name: '年份',
      value: `${new Date().getFullYear()}`,
      state: 2,
    }),
    '1-3': () => ({
      name: '年月日',
      value: `${getNowDate()}`,
      state: 2,
    }),
    '2': {
      name: '',
      value: '',
      state: 1,
    },
  };

  const handleSelect = (val: any) => {
    let item = itemMapping[val];
    if (!item) {
      return;
    }

    if (typeof item === 'function') {
      item = item();
    }

    Currlist.value.push(cloneDeep(item));
  };

  // 删除一个小项
  const deleteItem = (index: number) => {
    Currlist.value.splice(index, 1);
  };

  // 保存按钮
  const save = async () => {
    Currlist.value.forEach((element: any) => {
      delete element.id;
    });
    emit('codeSettingSave', Currlist.value);
  };

  // 取消按钮
  const cancel = () => {
    router.back();
  };
</script>

<style scoped lang="less">
  .client-code-setting {
    padding: 30px;

    .item {
      position: relative;
      width: 100%;
      margin-bottom: 34px;
      overflow: auto;
      border-bottom: 1px solid #f9f9f9;
      margin-top: 30px;
      display: flex;

      .item-box {
        flex-shrink: 0;

        &-headerBox {
          background-color: #f5f7fa;
          height: 56px;
        }

        &-header {
          margin-left: 20px;
          position: relative;
          top: 50%;
          transform: translateY(-50%);

          :deep(.arco-input-outer > :first-child) {
            background-color: #fff;
          }

          :deep(.arco-input-wrapper .arco-input[disabled]) {
            -webkit-text-fill-color: #165dff;
          }

          .icon {
            font-size: 24px;
            vertical-align: middle;
          }
        }
      }

      &-container {
        position: relative;
        margin-bottom: 10px;

        .line {
          display: inline-block;
          position: relative;
          left: 15px;
        }
      }
    }

    .client-read {
      .code-read {
        width: 300px;
      }

      :deep(.arco-input-wrapper .arco-input[disabled]) {
        -webkit-text-fill-color: #165dff;
      }
    }
  }
</style>
